import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, DatePicker } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { getMessage, TextWidget } from '@inbiz/react';
import { getIndexList } from '../service'


interface IProps {
  tabskey: string;
  getTableData: any;
  getAnalysisList: any;
  pageSize: any;
  logOpen:boolean;
  $searchResult:any;
}

const HeaderForm = (props: IProps) => {
  const RangePicker: any = DatePicker.RangePicker;

  const { tabskey, getTableData, getAnalysisList,  pageSize,logOpen ,$searchResult} = props;

  // 初始化form表单
  const [form] = Form.useForm();

      //查询
      const onQuery = () => {
      

        form.validateFields().then((res: any) => {
          let extra = {}
          if (tabskey == 'issueAnalysisLog') {
            if (res.type) {
              extra.Type = res.type
            }
            if (res.message) {
              extra.KeyWord = res.message
            }
            if (res.createTime) {
              let StartTime = res.createTime[0]
                ? res.createTime[0].format('yyyy-MM-DD')
                : '';
              let EndTime = res.createTime[1]
                ? res.createTime[1].format('yyyy-MM-DD')
                : '';
              extra.StartTime = StartTime
              extra.EndTime = EndTime;
            }
            getAnalysisList(1, pageSize, extra)
            $searchResult(extra)
          } else {
            // 搜索词
            if (res.keyWord) {
              extra.KeyWord = res.keyWord
            }
            // 索引库
            if (res.indexName) {
              extra.IndexId = res.indexName.join(',')
            }
            // 搜索人
            if (res.userName) {
              extra.UserName = res.userName
            }
            // 搜索时间
            if (res.createTime
            ) {
              let StartTime = res.createTime[0]
                ? res.createTime[0].format('yyyy-MM-DD')
                : '';
              let EndTime = res.createTime[1]
                ? res.createTime[1].format('yyyy-MM-DD')
                : '';
              extra.StartTime = StartTime
              extra.EndTime = EndTime;
    
            }
            getTableData(1 ,pageSize, extra)
            $searchResult(extra)
          }
    
    
        });
      };


  // 问题分析日志的类型

  // 获取索引库列表
  const [indexData, $indexData] = useState([])
  useEffect(() => {
    getIndexList().then((res) => {
      $indexData(res.Data.Items)
    })
  }, [])
  let arr: any[] | undefined = []
  if (tabskey == 'issueAnalysisLog') {
    arr = [{ label: 'Info', value: 'Info' }, { label: 'Error', value: 'Error' }]
  } else {
    indexData?.map((item: any, index: any) => {
      arr.push({ label: item.IndexName, value: item.Id })
    })
  }



  const { Option } = Select;
  const getFields = () => {
    const children = [];
    children.push(
      <>
        {tabskey == 'issueAnalysisLog' ?
            (
            <>
              {/* 类型 */}
              <Form.Item
                name={`type`}
                label={<div title={getMessage('LogManagement.type')}><TextWidget>LogManagement.type</TextWidget></div>}
              >
                <Select
                  showArrow={true}
                  style={{ width: '300px' }}
                  placeholder={getMessage('LogManagement.pleaseSelect')}
                  optionFilterProp="children"
                  options={arr}
                  allowClear={true}

                ></Select>
              </Form.Item>

              {/* 信息*/}
              <Form.Item
                name={`message`}
                label={<div title={getMessage('LogManagement.message')}><TextWidget>LogManagement.message</TextWidget></div>}

              >
                <Input
                  placeholder={getMessage('LogManagement.pleaseInput')}
                  style={{ width: '300px' }}
                />
              </Form.Item>

              {/* 创建时间 */}
              <Form.Item
                name={`createTime`}
                label={<div title={getMessage('LogManagement.createTime')}><TextWidget>LogManagement.createTime</TextWidget></div>}
              >
                <RangePicker
                  placeholder={[
                    getMessage('LogManagement.pleaseSelectADate'),
                    getMessage('LogManagement.pleaseSelectADate')
                  ]
                  }
                  style={{ width: '300px' }}
                  allowEmpty={[true, true]}
                />
              </Form.Item>
            </>
            )
          :
          (
          <>
            <Form.Item
              name={`keyWord`}
              label={<div title={getMessage('LogManagement.keyWord')}><TextWidget>LogManagement.keyWord</TextWidget></div>}
            >
              <Input
                placeholder={getMessage('LogManagement.pleaseInput')}
                style={{ width: '300px' }}
              />
            </Form.Item>

            <Form.Item
              name={`indexName`}
              label={<div title={getMessage('LogManagement.indexName')}><TextWidget>LogManagement.indexName</TextWidget></div>}
            >
              <Select
                mode="multiple"
                showArrow={true}
                showSearch
                style={{ width: '300px' }}
                placeholder={getMessage('LogManagement.pleaseSelect')}
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option?.label ?? '').includes(input)
                }
                filterSort={(optionA, optionB) =>
                  (optionA?.label ?? '')
                    .toLowerCase()
                    .localeCompare((optionB?.label ?? '').toLowerCase())
                }
                options={arr}

              ></Select>
            </Form.Item>



            <Form.Item
              name={`userName`}
              label={<div title={getMessage('LogManagement.searchPeople')}><TextWidget>LogManagement.searchPeople</TextWidget></div>}
            >
              <Input
                placeholder={getMessage('LogManagement.pleaseInput')}
                style={{ width: '300px' }}
              />
            </Form.Item>

            <Form.Item
              name={`createTime`}
              label={<div title={getMessage('LogManagement.searchTime')}><TextWidget>LogManagement.searchTime</TextWidget></div>}
            >
              <RangePicker
                placeholder={[
                  getMessage('LogManagement.pleaseSelectADate'),
                  getMessage('LogManagement.pleaseSelectADate'),
                ]}
                style={{ width: '300px' }}
                allowEmpty={[true, true]}
              />
            </Form.Item>

          </>
          )
        }

        {/* 重置、查询 */}
        <div className={tabskey=='issueAnalysisLog'?'alonebtn':'buttons'} >
          <Button
            onClick={() => {
              form.resetFields();
              onQuery()
            }}
            style={{
              height: '32px',
              color: 'var(--inbiz-color-text)',
              borderRadius: 'var(--inbiz-border-radius-base)',
            }}
          >
            <TextWidget>LogManagement.reset</TextWidget>
          </Button>
          <Button
            type="primary"
            onClick={()=>onQuery()}
            style={{
              margin: '0 0 0 20px',
              height: '32px',
              borderRadius: 'var(--inbiz-border-radius-base)',
            }}
          >
            <TextWidget>LogManagement.query</TextWidget>
          </Button>
        </div>
      </>
    );
    return children;
  };


  return (
    <div className={tabskey=='issueAnalysisLog'?'problem':"headerForm" }>
      <Form
        colon={false}
        form={form}
        // layout={'inline'}
        name="advanced_search"
        labelAlign="right"
        labelCol={{span:6}}
      >
        {getFields()}
      </Form>
    </div>
  );
}

export default HeaderForm;
